<script setup lang="ts">
import { computed, withDefaults } from "vue";

defineExpose({
  name: 'SelfMessage'
})

const props = withDefaults(defineProps<{
  message: string | undefined | number,
  src: string | undefined,
  noWrap?: boolean
}>(), {
  noWrap: false
})

const getWrap = computed(() => {
  return props.noWrap ? 'nowrap' : 'normal'
})
</script>

<template>
  <!-- 自己消息 -->
  <div class="myself-message-box">
    <!-- 头像 -->
    <div class="avatar-box">
      <img class="avatar" :src="src || '../public/images/avatar/avatar-220.jpg'" alt="">
    </div>
    <!-- 对方聊天消息框 -->
    <div class="myself-message">{{ message }}</div>
  </div>
</template>

<style lang="scss" scoped>
.myself-message-box {
  margin-bottom: $message-message-space;
  display: flex;
  justify-content: end;
  flex-direction: row-reverse;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  // 字体描边实现加粗
  -webkit-text-stroke: 0.2px currentColor;
  font-size: $chat-font-size;

  .avatar-box {
    width: $avatar-size;
    height: $avatar-size;
    border-radius: $avatar-radius;
    overflow: hidden;
    margin-left: $avatar-message-space;

    .avatar {
      width: $avatar-size;
      border-radius: $avatar-radius;
      height: $avatar-size;
      object-fit: cover;
    }
  }

  .myself-message {
    padding: $message-box-padding;
    border-radius: $message-box-radius;
    max-width: $max-width;
    background-color: $self-message-bg-color;
    color: $self-message-color;
    position: relative;
    line-height: $message-line-height;
    letter-spacing: $font-letter-spacing;
    white-space: v-bind(getWrap);

    &:before {
      content: '';
      position: absolute;
      right: -11px;
      top: 15px;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-left: 6px solid $self-message-bg-color;
    }
  }
}
</style>